import ArticleCardStandard from "@/components/ArticleCardStandard";
import { getAllArticles } from "@/services/article";
import { Article } from "@/types";
import { Col, Row } from "antd";
import { useEffect, useState } from "react";
import { history } from "umi";
// 获取标签数据
const Home = () => {
  const [articles, setArticles] = useState<Article[]>([]);
  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
    const target = e.target as HTMLElement;
    const col = target.closest("[data-article-id]") as HTMLElement | null;
    
    const articleId = col?.dataset.articleId;
    if (articleId) {
      history.push(`/detail/${articleId}`);
    }
  };
  useEffect(() => {
    const getData = async () => {
      try {
        const data = await getAllArticles();
        setArticles(data);
      } catch (error) {
        console.error("Fetch error:", error);
      }
    };
    getData();
  }, []);
  return (
    <>
      <Row onClick={handleClick} gutter={[32, 32]} justify="start" wrap>
        {articles.map((article, index) => (
          <Col
            data-article-id={article.id}
            className="flex justify-center"
            span={6}
            key={article.id}
          >
            <ArticleCardStandard {...article}></ArticleCardStandard>
          </Col>
        ))}
      </Row>
    </>
  );
};
export default Home;
